import {  mapValues, without } from 'lodash'
interface DefaultPropsType {
  [key: string]: {
    props: object;
    extraProps?: { [key: string]: any };
  };
}

// the common default props, all the components should have these props
export const commonDefaultProps: CommonDefaultProps = {
  // actions
  actionType: '',
  url: '',
  // size
  height: '',
  width: '318px',
  paddingLeft: '0px',
  paddingRight: '0px',
  paddingTop: '0px',
  paddingBottom: '0px',
  // border type
  borderStyle: 'none',
  borderColor: '#000',
  borderWidth: '0',
  borderRadius: '0',
  // shadow and opacity
  boxShadow: '0 0 0 #000000',
  opacity: 1,
  // position and x,y
  position: 'absolute',
  left: '0',
  top: '0',
  right: '0'
}

export interface CommonDefaultProps {
  // actions
  actionType: string;
  url: string;
  // size
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // border type
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // shadow and opacity
  boxShadow: string;
  opacity: number;
  // position and x,y
  position: string;
  left: string;
  top: string;
  right: string;
}

export const textDefaultProps: TextComponentProps = {
  // basic props - font styles
  text: '正文内容', //临时放一下
  fontSize: '14px',
  fontFamily: '',
  fontWeight: 'normal',
  fontStyle: 'normal',
  textDecoration: 'none',
  lineHeight: '1',
  textAlign: 'center',
  color: '#000000',
  backgroundColor: '',
  ...commonDefaultProps,
}


export interface TextComponentProps extends CommonDefaultProps {
  // basic props - font styles
  text: string;
  fontSize: string;
  fontFamily: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string;
  lineHeight: string;
  textAlign: string;
  color: string;
  backgroundColor: string;
}

export interface ImageComponentProps extends CommonDefaultProps {
  src: string;
}

export const imageDefaultProps:  ImageComponentProps = {
  src: 'test.url',
  ...commonDefaultProps
}

export interface ShapeComponentProps extends CommonDefaultProps {
  backgroundColor: string;
}

export const shapeDefaultProps: ShapeComponentProps = {
  backgroundColor: '',
  ...commonDefaultProps
}


export type AllComponentProps = TextComponentProps & ImageComponentProps & ShapeComponentProps;

// this contains all default props for all the components
// useful for inserting new component into the store
export const componentsDefaultProps: DefaultPropsType = {
  'l-text': {
    props: {
      // text: '正文内容', 
      ...textDefaultProps,
      fontSize: '14px',
      width: '125px',
      height: '36px',
      left: (320 / 2) - (125 / 2) + 'px',
      top: (500 / 2) - (36 / 2) + 'px'
    }
  },
  'l-image': {
    props: {
      ...imageDefaultProps
    }
  },
  'l-shape': {
    props: {
      backgroundColor: '',
      ...commonDefaultProps
    }
  }
}
export const isEditingProp ={
  isEditing: {
    type: Boolean,
    default: false
  }
}


export type isEditing = {
  isEditing: boolean;
};
/**
 * 将给定的属性对象转换为组件属性对象
 * 此函数主要用于将一个键值对对象转换为一个特定格式的对象，该对象的值包含类型和默认值
 * 这在创建组件库或配置对象时特别有用，其中需要明确指定每个属性的类型和默认值
 * 
 * @param props 一个包含属性及其值的对象，键是属性名，值是属性的默认值  { [key: string]: any }
 * @returns 返回一个新对象，其属性值包含原始值的类型和默认值
 */
export const transformToComponentProps =(props: TextComponentProps) => {
  return mapValues(props, (item) => {
    return {
      type: item.constructor,
      default: item
    }
  }) 
}
export const transformToComponentPropsOld =(props: { [key: string]: any }) => {
  return mapValues(props, (item) => {
    return {
      type: item.constructor,
      default: item
    }
  }) 
}
export default componentsDefaultProps

// 所有样式属性
export const textStylePropNames = without(Object.keys(textDefaultProps), 
'actionType', 'url','text')

export const imageStylePropNames = without(Object.keys(imageDefaultProps), 
'actionType', 'url','imageSrc')

export const shapeStylePropNames = without(Object.keys(imageDefaultProps), 
'actionType', 'url','text')